<template>
  <DialogButton
    :button-style="Data.style"
    :submit-loading="changeLoading"
    :button-text="Data.changePost.dialogButtonText"
    :dialog-title="Data.changePost.dialogTitle"
    :submit-function="Data.changePost.submitFunction"
    :function-ok="Data.functionOk"
    :dialog-style="dialogStyle"
    @dialog-close="Data.functionOk = false"
  >
    <template #body>
      <div
        v-loading="addLoading"
      >
        <el-form
          :model="Data.changePost.changeQuery"
          :rules="changeRules"
          label-width="auto"
          style="max-width: 600px"
        >
          <el-form-item
            label="标题"
            prop="title"
          >
            <el-input
              v-model="Data.changePost.changeQuery.title"
              placeholder="请输入标题"
            />
          </el-form-item>
          <el-form-item
            label="选择图片"
            prop="img"
          >
            <img-upload v-model="Data.changePost.changeQuery.files[0].fileUrl" />
          </el-form-item>
          <el-form-item
            label="持续时间"
            prop="time"
          >
            <DateSelect
              :start-time="Data.changePost.changeQuery.startTime"
              :end-time="Data.changePost.changeQuery.endTime"
              @start-time="(time) => { Data.changePost.changeQuery.startTime = time }"
              @end-time="(time) => { Data.changePost.changeQuery.endTime = time }"
            />
          </el-form-item>
        </el-form>
        <div>
          <post-content
            :data-form="Data.changePost.changeQuery.content"
            @update:data-form="upDateForm"
          />
        </div>
      </div>
    </template>
  </DialogButton>
</template>
<script setup>
import * as api from '@/api/platform/post'
import DialogButton from '@/components/DialogButton.vue'
import DateSelect from '@/components/DateSelect.vue'

function upDateForm (val) {
  Data.changePost.changeQuery.content = val
}
const dialogStyle = ref('width: 80%')

const props = defineProps({
  postId: {
    type: Number,
    default: -1
  },
  title: {
    type: String,
    default: ''
  },
  tags: {
    type: String,
    default: ''
  },
  files: {
    type: Array,
    default: () => []
  },
  content: {
    type: String,
    default: ''
  },
  startTime: {
    type: String,
    default: ''
  },
  endTime: {
    type: String,
    default: ''
  }
})

const changeLoading = ref(false)
const Data = reactive({
  changePost: {
    dialogButtonText: '编辑',
    dialogTitle: '编辑帖子',
    submitFunction: () => {
      changeLoading.value = true
      // 重新构造imgUrl
      // Data.changePost.changeQuery.imgUrl = `${import.meta.env.VITE_APP_BASE_API}/mall4cloud${Data.changePost.changeQuery.imgUrl}`
      if (Data.changePost.changeQuery.startTime && Data.changePost.changeQuery.title) {
        // 避免指向同一个响应式对象
        const temp = JSON.parse(JSON.stringify(Data.changePost.changeQuery))
        if (!temp.files[0].fileUrl) {
          temp.files = []
        }
        api.changePost(
          temp
        ).then(() => {
          ElMessage({
            message: '操作成功',
            type: 'success'
          })
          changeLoading.value = false
          Data.functionOk = true
          emits('workEnd')
        }).catch(() => {
          ElMessage.error('操作失败')
          changeLoading.value = false
        })
      } else {
        ElMessage.error('请填写必要内容')
        changeLoading.value = false
      }
    },
    changeQuery: {
      title: props.title,
      content: props.content,
      postId: props.postId,
      tags: props.tags,
      files: [{ fileUrl: '', seq: 0, fileType: 'bmp' }],
      startTime: props.startTime,
      endTime: props.endTime
    }
  },
  functionOk: false,
  style: 'margin: 0px;width: 100%; padding: 0; font-size: 12px'
})

const changeRules = {
  time: [
    { required: true, message: '请选择时间', trigger: 'change' }
  ],
  title: [
    { required: true, message: '请输入标题', trigger: 'change' }
  ]
}

const emits = defineEmits(['workEnd'])

onMounted(() => {
  // 避免没有图片绑定失败
  if (props.files.length !== 0) {
    Data.changePost.changeQuery.files = props.files
  } else {
    Data.changePost.changeQuery.files = [{ fileUrl: '', seq: 0, fileType: 'bmp' }]
  }
})
</script>
